<template>
  <div class="log-statistics-container" :style="{ height: tableY + 75 + 'px' }">
    <a-spin :spinning="loading" />
    <div class="operate-warp">
      <a-button
        class="margin-bottom-xs"
        icon="download"
        @click="exportExcel()"
        :loading="exportLoading"
      >
        导出
      </a-button>
    </div>
    <div class="table-container">
      <vxe-table
        ref="xTable"
        height="100%"
        align="center"
        show-overflow
        show-header-overflow
        border
        :data="tableData"
        :column-config="{ resizable: true }"
        size="small"
        v-if="tableShow"
      >
        <vxe-column type="seq" width="80" title="序号"></vxe-column>
        <vxe-column field="orgName" min-width="120" title="业务机构">
        </vxe-column>
        <vxe-column field="proCode" min-width="120" title="项目编码">
        </vxe-column>
        <vxe-column field="proName" min-width="120" title="项目名称">
        </vxe-column>
        <vxe-column field="contacts" min-width="120" title="项目经理">
        </vxe-column>
        <vxe-column field="contactsPhone" min-width="120" title="联系方式">
        </vxe-column>
        <vxe-column title="使用数量">
          <vxe-column
            width="120"
            :field="item"
            :title="item"
            v-for="(item, index) in columns"
            :key="index"
          >
          </vxe-column>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="pager-container">
      <vxe-pager
        size="small"
        background
        :current-page.sync="pager.page"
        :page-size.sync="pager.pageSize"
        :total="pager.total"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
        :page-sizes="[20, 50, 100, 500]"
        @page-change="paginationChange"
      >
        <template #left>
          <div class="vxe-pager-left-tip-container">
            共<span>{{ pager.total }}</span
            >条
          </div>
        </template>
      </vxe-pager>
    </div>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import { downLoadFileByArraybuffer } from "@/utils/util";
import { exportExcel } from "@/api/bim";
export default {
  name: "Table",
  props: {
    tableY: 0,
    startTime: [],
    deptCode: undefined,
  },
  data() {
    return {
      exportLoading: false,
      columns: [],
      loading: false,
      tableShow: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
    };
  },
  //   mounted() {
  //     this.getTableData();
  //   },
  //   activated() {
  //     this.getTableData();
  //   },
  methods: {
    //批量导出
    exportExcel() {
      this.exportLoading = true;
      exportExcel({
        startTime: this.startTime?.[0] || "",
        endTime: this.startTime?.[1] || "",
        orgId: this.deptCode || "",
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "日志统计");
        })
        .catch((_) => {})
        .finally((_) => {
          this.exportLoading = false;
        });
    },

    //查询列表数据
    getTableData(params = {}) {
      let { page, pageSize } = this.pager;
      let { time, deptCode } = params;
      this.loading = true;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/system/sysOperationLog/getStatPage?pageNo=${page}&pageSize=${pageSize}`,
            {
              startTime: time?.[0] || "",
              endTime: time?.[1] || "",
              orgId: deptCode || "",
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.tableData = res?.pageSet?.rows || [];
            this.columns = res?.colums || [];
            this.pager.total = res?.pageSet?.totalCount || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            this.columns = [];
            resolve();
          })
          .finally((_) => {
            this.loading = false;
            this.tableShow = true;
            this.$nextTick(() => {
              if (this.$refs.xTable) {
                this.$refs.xTable.refreshColumn();
              }
            });
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      let params = {
        startTime: this.startTime?.[0] || "",
        endTime: this.startTime?.[1] || "",
        orgId: this.deptCode || "",
      };
      this.getTableData(params);
    },
  },
};
</script>

<!--style-->
<style scoped lang="less">
.table {
  background-color: @base-bg-color;
  padding: 24px;
}
.table-link:hover {
  text-decoration: underline;
}
.log-statistics-container {
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  position: relative;
  /deep/.ant-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .operate-warp {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
  }
  .table-container {
    flex: 1;
    overflow: hidden;
    /deep/.vxe-table {
      .vxe-table--body {
        tr {
          td {
            border-bottom: 1px solid #e8eaec;
          }
        }
      }
    }
  }
  .pager-container {
    flex-shrink: 0;
  }
}
</style>
